<template>
	<view class="content">
		<view style="page_header">
			<navTop :show="false" @search="search($event,1)" :showhead="false"></navTop>
		</view>
		
		
	<!-- 	<view style="width: 100%;background-color: #FFFFFF;margin-top: 20upx;margin-bottom: 20upx;">
			<navigator url="/pages/member/lineInfo">
			<lPrice :info="quotation"></lPrice>
			</navigator>
			</view> -->
<!--
		<view class="titleLine">年份板块</view>

		<view class="example-body" style="margin: 3upx;">
			<uni-grid :column="3" :highlight="true">
				<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
					<view class="grid-item-box" @click="navto()">
						<text style="font-size: 24upx;">{{ item.name }}</text>

						<text style="font-size: 50upx;color: #db3542;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">{{ item.text }}</text>

						<view class="flexbox">
							<view class="flexbox1" v-if="item.monarrow == 'up'" style="color: #a22c32;">
								月
								<uni-icons type="arrowthinup" color="#a22c32" size="9" />
								{{ item.mon }}
							</view>

							<view class="flexbox1" v-else>
								月
								<uni-icons type="arrowthindown" size="9" />
								{{ item.mon }}
							</view>

							<view class="flexbox2" v-if="item.hafarrow == 'up'" style="color: #a22c32;">
								半年
								<uni-icons type="arrowthinup" color="#a22c32" size="9" />
								{{ item.haf }}
							</view>

							<view class="flexbox2" v-else>
								半年
								<uni-icons type="arrowthindown" size="9" />
								{{ item.haf }}
							</view>
						</view>

						<view class="flexbox">
							<view class="flexbox3" v-if="item.tridarrow == 'up'" style="color: #a22c32;">
								3个月
								<uni-icons type="arrowthinup" color="#a22c32" size="9" />
								{{ item.trid }}
							</view>

							<view class="flexbox3" v-else>
								3个月
								<uni-icons type="arrowthindown" size="9" />
								{{ item.trid }}
							</view>

							<view class="flexbox4" v-if="item.yeararrow == 'up'" style="color: #a22c32;">
								年
								<uni-icons type="arrowthinup" color="#a22c32" size="9" />
								{{ item.year }}
							</view>

							<view class="flexbox4" v-else>
								年
								<uni-icons type="arrowthindown" size="9" />
								{{ item.year }}
							</view>
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
-->
<!-- 		<view class="titleLine">行情动态</view>
 -->
		<view>
			<!-- <view>
			<ms-tabs :list="type" v-model="active" itemColor="#db3542" lineColor="#db3542" @input="inputv" :sendData="inputval" ></ms-tabs>
			</view> -->
			
			<!-- <view style="margin:10upx 10upx;">
			<ms-tabs :list="type1" v-model="active1" itemColor="#db3542"  @input="inputv1" :sendData="inputval1" :lineShow="false" itemBackgroundColor="#eae7ec"></ms-tabs>
			</view>
			
			<view style="margin:5upx 10upx;">
			<ms-tabs :list="type2" v-model="active2" itemColor="#db3542"  @input="inputv2" :sendData="inputval2"  :lineShow="false" itemBackgroundColor="#eae7ec"></ms-tabs>
			</view> -->
			
		

			<view class="box">
				
				<view style="display: flex;padding: 10upx 20upx;font-size: 30upx;background-color: #838285;color: #FFFFFF;" >
								<view style="flex: 4;">
									品名
								</view>
								<view style="flex: 3;padding-left: 15upx;" @tap="hotToggle">
									<view style="margin-left: 10upx;">
										参考价
										<uni-icons  :type="forbid" size="10" color="#FFFFFF" />
									</view>
								</view>
								<view style="flex: 2;padding-left: 15upx;" @tap="hotToggle1">
										<view style="margin-left: 30upx;">
										涨跌
										<uni-icons  :type="forbid1" size="10" color="#FFFFFF" />
										</view>
										
								</view>	
								<view style="flex: 2;padding-left: 15upx;" @tap="hotToggle2">
										<view style="float: right;">
										涨幅
										<uni-icons  :type="forbid2" size="10" color="#FFFFFF" />
										
										
										</view>
								</view>	
								
							</view>
							
					<view style="display: flex;padding: 10upx 20upx;font-size: 30upx;" 
					v-for="item in tableList" :key="item.id" @click="navToInfo(item.id)">
					
									<view style="flex: 4;">
										{{item.name}}
									
									</view>
									<view style="flex: 3;padding-left: 15upx;">
										<text style="margin-left: 10upx;">¥{{item.price}}</text>
									</view>
									<view style="flex: 2;padding-left: 15upx;">
											<text v-if="item.updown" style="margin-left: 30upx;">{{item.updown}}</text>
											<text v-else style="margin-left: 30upx;">0</text>
									</view>	
									<view style="flex: 2;padding-left: 15upx;">
											<text v-if="item.upp" style="float: right;color: #A22C32;">{{item.upp}}%</text>
											<text v-else style="float: right;color: #A22C32;">0%</text>
										 
									</view>	
							
								</view>
							
				<!-- <t-table @change="change">
					<t-tr>
						<t-th>品名</t-th>
						<t-th @tap="hotToggle">参考价
						<uni-icons  :type="forbid" size="16" color="#000000" />
						
						</t-th>
						<t-th @tap="hotToggle1">涨跌
						<uni-icons  :type="forbid1" size="16" color="#000000" />
						</t-th>
						<t-th @tap="hotToggle2">涨幅
						<uni-icons  :type="forbid2" size="16" color="#000000" />
						</t-th>
					</t-tr>
				
					<view v-for="item in tableList" :key="item.id">
						
					<navigator :url="'/pages/quotes/detail?id='+item.id">
					<t-tr  >
					
						<t-td >{{ item.name }}</t-td>
						<t-td>{{ item.price }}</t-td>
						
						<t-td v-if="item.updown" style="color: #a22c32;">{{ item.updown }}</t-td>
						
						<t-td v-else style="color: #a22c32;">0</t-td>
						
						
						<t-td v-if="item.upp" style="color: #a22c32;">{{ item.upp }}%</t-td>	
						<t-td v-else style="color: #a22c32;">0%</t-td>	
						
					</t-tr>
					</navigator>
					</view>
					
					
					
				</t-table> -->
				<uni-load-more :status="status" :content-text="contentText" />
			</view>
			
		</view>
	</view>
</template>

<script>
import navTop from '@/components/navTop.vue';
import tTable from '@/components/t-table/t-table.vue';
import tTh from '@/components/t-table/t-th.vue';
import tTr from '@/components/t-table/t-tr.vue';
import tTd from '@/components/t-table/t-td.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
// import lPrice from '@/components/linePrice.vue';
// import uniGrid from '@/components/uni-grid/uni-grid.vue';
// import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
// import msTabs from '@/components/ms-tabs/ms-tabs.vue';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
  
export default {
	components: {
		uniIcons,
		// lPrice,
		// uniGrid,
		// uniGridItem,
		// msTabs,
		tTable,
		tTh,
		tTr,
		tTd,
		uniLoadMore,
		navTop
	},
	data() {
		return {
			//顶部大盘指数栏目，和首页一样的
			quotation:{
				nowprice:10000,//当前价格
				up:10,//涨，负数值标示下跌
				upp:'0.01',//上涨幅度，下跌幅度
				dup:'0.1',//周上涨，下跌
				weekup:'0.1',//周上涨，下跌
				mup:'0.1',//月上涨，下跌
				hot:1000,//市场热度
				upfy:'0.15',//较昨日上涨或下跌，下跌负数
				upfw:'0.12',//较上周上涨或下跌，下跌负数
			},
			
			   status:'loading',
			   contentText: {
			            contentdown:'上拉加载更多',
			            contentrefresh: '加载中',
			            contentnomore: '没有更多',
			   },
			  page:1,
			  newData:[],
			//年份板块
			//
			// list: [
			// 	{
			// 		name: '新酒',//商品名字
			// 		text: '15000',//当前价格
			// 		monarrow: 'up',//月的涨跌，up或者down，up上升，down下降
			// 		mon: '1%',//月涨跌
			// 		hafarrow: 'up',//半年涨跌，up或者down，up上升，down下降
			// 		haf: '2%',//半年涨跌
			// 		tridarrow: 'up',//3个月涨跌，up或者down，up上升，down下降
			// 		trid: '2%',//3个月涨跌
			// 		yeararrow: 'down',//年涨跌，up或者down，up上升，down下降
			// 		year: '1%'//年涨跌
			// 	},
			// 	{
			// 		name: '次新酒',
			// 		text: '15000',
			// 		monarrow: 'up',
			// 		mon: '1%',
			// 		hafarrow: 'up',
			// 		haf: '2%',
			// 		tridarrow: 'down',
			// 		trid: '2%',
			// 		yeararrow: 'up',
			// 		year: '1%'
			// 	},
			// 	{
			// 		name: '老酒',
			// 		text: '15000',
			// 		monarrow: 'up',
			// 		mon: '1%',
			// 		hafarrow: 'down',
			// 		haf: '2%',
			// 		tridarrow: 'down',
			// 		trid: '2%',
			// 		yeararrow: 'up',
			// 		year: '1%'
			// 	},
			// 	{
			// 		name: '2020年',
			// 		text: '15000',
			// 		monarrow: 'up',
			// 		mon: '1%',
			// 		hafarrow: 'up',
			// 		haf: '2%',
			// 		tridarrow: 'down',
			// 		trid: '2%',
			// 		yeararrow: 'up',
			// 		year: '1%'
			// 	},
			// 	{
			// 		name: '2019年',
			// 		text: '15000',
			// 		monarrow: 'down',
			// 		mon: '1%',
			// 		hafarrow: 'up',
			// 		haf: '2%',
			// 		tridarrow: 'down',
			// 		trid: '2%',
			// 		yeararrow: 'up',
			// 		year: '1%'
			// 	},
			// 	{
			// 		name: '2018年',
			// 		text: '15000',
			// 		monarrow: 'up',
			// 		mon: '1%',
			// 		hafarrow: 'up',
			// 		haf: '2%',
			// 		tridarrow: 'down',
			// 		trid: '2%',
			// 		yeararrow: 'up',
			// 		year: '1%'
			// 	}
			// ],
			//行情动态，表格上面的筛选
			type: [//表格第一个类型选择
				{
					id: 1,
					name: '全部'
				}
			],
			active: 0,
			inputval: 0,
			
			type1: [//第二个类型选择
				{
					id: 0,
					name: '全部'
				}
			],
			active1: 0,
			inputval1: 0,
			
			type2: [//第三个类型选择
				{
					id: 0,
					name: '全部'
				}
			],
			active2: 0,
			inputval2: 0,
			//表格中的信息，根据筛选返回
			tableList: [],
			forbid: 'arrowthindown',
			forbid1: 'arrowthindown',
			forbid2: 'arrowthindown',
			orderinfo:'addtime',
			descinfo:'asc'
			
		};
	},
	watch: {
		active() {
			//console.log(this.active3); // 0
		}
	},
	onLoad() {
		//this.loadClass();
		this.loadIndexData('first');
		//this.initline();
		//uni.startPullDownRefresh();
	},
	onPullDownRefresh() {
			this.loadIndexData('first');
			//this.initline();
			//this.loadData();
	        setTimeout(function () {
	            uni.stopPullDownRefresh();  //停止下拉刷新动画
	        }, 1000);
	},
	onReachBottom : function(){
	            this.status = 'more';
	            this.loadMoreFunc();
	},
	methods: {
		navToInfo(id){
			uni.navigateTo({
				url:'/pages/quotes/detail?id='+id
			})
			
		},
		loadMoreFunc(){
			console.log("更多加载");
			
			
			this.loadIndexData('more');
			
			
		},
		hotToggle() {
			if(this.forbid=='arrowthinup'){
				this.forbid='arrowthindown';
				this.descinfo='asc';
			}else{
				this.forbid='arrowthinup';
				this.descinfo='desc';
			}
			
			this.orderinfo='price';
			this.loadIndexData('first');
		},
		hotToggle1() {
			if(this.forbid1=='arrowthinup'){
				this.forbid1='arrowthindown';
				this.descinfo='asc';
			}else{
				this.forbid1='arrowthinup';
				this.descinfo='desc';
			}
			
			this.orderinfo='updown';
			this.loadIndexData('first');
		},
		hotToggle2() {
			if(this.forbid2=='arrowthinup'){
				this.forbid2='arrowthindown';
				this.descinfo='asc';
			}else{
				this.forbid2='arrowthinup';
				this.descinfo='desc';
			}
			this.orderinfo='upp';
			this.loadIndexData('first');
			
		},
		// loadClass(){
		// uni.request({
		// 	url: this.webUrl+'/pclass', //仅为示例，并非真实接口地址。
		// 	data: '',
		// 	dataType: 'json',
		// 	method: 'get',
		// 	header: {
		// 		'content-type': 'application/json' // 微信默认就是
		// 	},
		// 	success: res => {
		// 		if (res.statusCode !== 404) {
		// 			//console.log(res.data );
		// 			this.type=[];
		// 			this.type1=[];
		// 			this.type2=[];
					
		// 			for (var i = 0; i < res.data.length; i++) { 
						
		// 			   // text += cars[i] + "<br>";
		// 			   if(res.data[i].type==0){
		// 				    this.type.push(res.data[i]);
		// 			   }else if(res.data[i].type==1){
		// 				    this.type1.push(res.data[i]);
		// 			   }else if(res.data[i].type==4){
		// 				    this.type2.push(res.data[i]);
		// 			   }
						
		// 			 }
					
					
					
		// 		} else {
					
		// 			console.log("数据没有");
		// 		}
		// 	}
		// });
		
		// //https://api.lujiuba.com/api/pclass	
		// },
		onShareAppMessage(res) {
				      return {
				        title: '你身边的白酒价格大全',
				        path: ''
				      }
		},
		loadIndexData(status){
				// uni.showLoading({
				//     title: '载入中...'
				// });
				if(status=='first'){
					
					this.page=1;
					this.tableList=[];
				}
				
				const sendData = {
					"orderinfo": this.orderinfo,
					"descinfo":this.descinfo,
					"page":this.page
					
				};
				
				uni.request({
					url: this.webUrl+'/quotes', //仅为示例，并非真实接口地址。
					data: sendData,
					dataType: 'json',
					method: 'GET',
					header: {
						'content-type': 'application/json' // 微信默认就是
					},
					success: res => {
						
						if (res.statusCode !== 404) {
							//console.log(res.data );
							this.page+=1;
							this.tableList.push(...res.data);
							//uni.hideLoading();
						} else {
							this.status='noMore'
							console.log("数据没有");
						}
					}
				});
		},
		
		
		// loadData(){
		// 	const sendData = {
		// 		"type": this.type[this.inputval].name,
		// 		"year": this.type1[this.inputval1].name,
		// 		//"name":  encodeURI(this.name),
		// 		"sta": this.type2[this.inputval2].name//这里先传银行编号，后续确定了在修改
				
		// 	};
		
		// 	uni.request({
		// 		url: this.webUrl+'/byclass', //仅为示例，并非真实接口地址。
		// 		data: sendData,
		// 		dataType: 'json',
		// 		method: 'get',
		// 		header: {
		// 			'content-type': 'application/json' // 微信默认就是
		// 		},
		// 		success: res => {
		// 			console.log(res.data );
		// 			if (res.statusCode !== 404) {
						
						
		// 				this.tableList=res.data;
		// 			} else {
		// 				this.tableList=[];
		// 				console.log("数据没有");
		// 			}
		// 		}
		// 	});
			
			
			
		// },
		// initline(){
		// 	uni.request({
		// 		url: this.webUrl+'/mq', //仅为示例，并非真实接口地址。
		// 		data: '',
		// 		dataType: 'json',
		// 		method: 'get',
		// 		header: {
		// 			'content-type': 'application/json' // 微信默认就是
		// 		},
		// 		success: res => {
		// 			if (res.statusCode !== 404) {
		// 				//console.log(res.data );
						
		// 				this.quotation=res.data;
		// 			} else {
						
		// 				console.log("数据没有");
		// 			}
		// 		}
		// 	});
		// },
		// inputv(val){
		// 	this.inputval=val;
			 
		// 	console.log("点击了"+val);
						
		// 		this.loadData();	
		// 	},
		// inputv1(val){
		// 		this.inputval1=val;
		// 		console.log("点击了"+val);
				
		// 		this.loadData();
							
		// 		},
		// inputv2(val){
		// 		this.inputval2=val;
		// 		console.log("点击了"+val);
				
		// 		this.loadData();	
								
							
		// 		},
		navto() {
			uni.navigateTo({
				url: '/pages/quotes/detail'
			});
		}
	}
};
</script>

<style lang="scss">
	.page_header {
		position: sticky;
		width: 100%;
		left: 0;
		right: 0;
		// #ifdef H5 
		top: 44px;//适配网页
		// #endif 
		top: 0;//适配其他平台
		z-index: 99;
	}
.box {
	padding-top: 10upx;
}
.year {
	padding-left: 20upx;
	font-size: 28upx;
}
.flexbox {
	/* 定义flex容器 */
	display: flex;
	font-size: 20upx;
	width: 100%;
	.flexbox1 {
		flex: 4;
		text-align: left;
		padding-left: 6upx;
	}
	.flexbox2 {
		flex: 6;
		text-align: right;
		padding-right: 6upx;
	}
	.flexbox3 {
		flex: 6;
		text-align: left;
		padding-left: 6upx;
	}
	.flexbox4 {
		flex: 4;
		text-align: right;
		padding-right: 6upx;
	}
}
.example-body1 {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
	font-size: 17px;
}

.example-body1 {
	flex-direction: column;
	padding: 5px;
}

.example-body1 {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding: 5rpx;
}

.titleLine {
	padding-left: 20upx;
	background-color: #ebe8ee;
	font-weight: bold;
	font-size: 32upx;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	padding-top: 5upx;
	padding-bottom: 5upx;
}

.example-body {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
	font-size: 14px;
	background-color: #ffffff;
}

.example-body {
	flex-direction: column;
	padding: 15px;
	background-color: #ffffff;
}

.grid-item-box {
	flex: 1;
	/* position: relative;
	*/
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1upx solid #f8f2fd;
	line-height: 60upx;
}
</style>
